/**
 * Copyright (c) 2020 kedacom
 * OpenATC is licensed under Mulan PSL v2.
 * You can use this software according to the terms and conditions of the Mulan PSL v2.
 * You may obtain a copy of Mulan PSL v2 at:
 * http://license.coscl.org.cn/MulanPSL2
 * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
 * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
 * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
 * See the Mulan PSL v2 for more details.
 **/
<template>
  <div class="addOptimize">
    <el-dialog
      :title="isedit ? $t('openatc.greenwaveoptimize.editroute') : $t('openatc.greenwaveoptimize.addroute')"
      :visible.sync="addDialogVisible"
      :close-on-click-modal="false"
      width="780px"
      height="280px"
      @close="close">
      <template v-if="step === 1">
        <editRouteDevice  ref="editRoutePhase"
                          :route="route"
                          @onNextClick="onNextClick"/>
      </template>
      <template v-if="step === 2">
        <editRoutePhase   ref="editRoutePhase"
                          :route="route"
                          @onPreviousClick="onPreviousClick"
                          @onNextClick="onNextClick"/>
      </template>
      <template v-if="step === 3">
        <editRouteDistance  ref="editRoutePhase"
                            :route="route"
                            @onPreviousClick="onPreviousClick"
                            @onNextClick="onNextClick"/>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import ChoseIntersection from '../../../components/ChoseIntersection'
import editRouteDevice from './editRouteDevice'
import editRoutePhase from './editRoutePhase'
import editRouteDistance from './editRouteDistance'
export default {
  name: 'addOptimize',
  components: { ChoseIntersection, editRouteDevice, editRoutePhase, editRouteDistance },
  data () {
    return {
      route: {},
      isedit: true,
      step: 1,
      addDialogVisible: false
    }
  },
  methods: {
    show (param) {
      this.step = 1
      if (param) {
        this.route = JSON.parse(JSON.stringify(param))
        this.isedit = true
      } else {
        this.isedit = false
        this.route = {}
      }
      this.addDialogVisible = true
    },
    close () {
      this.resetForm()
      this.addDialogVisible = false
    },
    onNextClick (res, step) {
      switch (step) {
        case 1:
          this.route.name = res.name
          this.route.devs = res.list
          this.step = 2
          break
        case 2:
          this.route.devs = res.list
          for (let dev of this.route.devs) {
            dev.width = dev.width ? dev.width : 0
            dev.nextDistance = dev.nextDistance ? dev.nextDistance : 0
          }
          this.step = 3
          break
        case 3:
          this.route.devs = res.list
          this.commit()
          break
      }
    },
    onPreviousClick (res, step) {
      switch (step) {
        case 2:
          this.route.devs = res.list
          this.step = 1
          break
        case 3:
          this.route.devs = res.list
          this.step = 2
          break
      }
    },
    handleDelete (index) {
      this.list.splice(index, 1)
    },
    commit () {
      this.$emit('updateRoute', this.route)
      // this.resetForm()
    },
    resetForm () {
      this.step = 0
      this.route = {}
    }
  }
}
</script>

<style lang="scss" rel="stylesheet/scss">
</style>
